<template>
  <section>
    <section v-if="!editPeriodDialog && !editLearnerDialog">
      <el-row>
        <el-button size="mini" type="primary" @click="createCourseBtn">新建课程</el-button>
      </el-row>
      <el-row>
        <el-table :data="classList">
          <el-table-column type="index" label="序号"/>
          <el-table-column label="课程名称" prop="title"/>
          <el-table-column label="开课时间" prop="start" :formatter="timeFormatter"/>
          <el-table-column label="结课时间" prop="end" :formatter="timeFormatter"/>
          <el-table-column label="课程简介" prop="description">
            <template slot-scope="scope">
              <el-popover placement="top-start" title="" width="200" trigger="click" :content="scope.row.description">
                <el-button slot="reference" size="mini" type="text">预览</el-button>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="管理">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="editPeriodBtn(scope.row)">课时</el-button>
              <el-button size="mini" type="text" @click="editLearnerBtn(scope.row)">学员</el-button>
            </template>
          </el-table-column>
          <el-table-column label="签到表">
            <template slot-scope="scope">
            <el-button size="mini" type="text" @click="signBtn(scope.row)">签到表</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" fixed="right">
            <template slot-scope="scope">
              <el-button :type="scope.row.edit?'success':'primary'" @click='confirm(scope.row)' size="mini" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
              <el-button @click='cancelBtn(scope.row)' size="mini" v-if="scope.row.edit">取消</el-button>
              <el-button @click='del(scope)' size="mini" v-if="!scope.row.edit" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination v-show="totalPage>0" style="margin-top:10px;" small
                       layout="prev, pager, next"
                       :page-count="totalPage"
                       @current-change="goPage">
        </el-pagination>
      </el-row>
      <el-dialog :visible.sync="editCourseDialog" :title="currCourse.id?'编辑':'新建'" v-if="editCourseDialog">
        <el-form label-width="100px">
          <el-form-item label="sn：">
            <el-input size="mini" v-model="currCourse.sn" style="width:50%"></el-input>
          </el-form-item>
          <el-form-item label="课程名称：">
            <el-input size="mini" v-model="currCourse.title" style="width:50%"></el-input>
          </el-form-item>
          <el-form-item label="起止时间：">
            <el-date-picker size="mini" v-model="currCourse.start" type="datetime"
                            placeholder="选择开始时间" default-time="12:00:00"
                            format="yyyy-MM-dd HH:mm:ss" value-format="timestamp"/>
            ~
            <el-date-picker size="mini" v-model="currCourse.end" type="datetime"
                            placeholder="选择结束时间" default-time="12:00:00" value-format="timestamp"
                            format="yyyy-MM-dd HH:mm:ss"/>
          </el-form-item>
          <el-form-item label="学员人数：">
            <el-input size="mini" v-model="currCourse.min" style="width:100px" type="number"/>
            ~
            <el-input size="mini" v-model="currCourse.max" style="width:100px" type="number"/>
          </el-form-item>
          <el-form-item label="课程描述：">
            <el-input size="mini" v-model="currCourse.description" type="textarea" style="width:80%"/>
          </el-form-item>
          <el-form-item label="">
            <el-button size="mini" type="success" @click="confirmCurrCourseBtn(currCourse)">{{currCourse.id?'保存':'新建'}}</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog :visible.sync="showSignDialog" :title="currCourse.title" v-if="showSignDialog">
        <sign-info :course="currCourse"></sign-info>
      </el-dialog>
    </section>
    <section v-if="editPeriodDialog">
      <el-button size="mini" type="text" @click="backBtn"> <<< </el-button>
      <period-list :course="currCourse"></period-list>
    </section>
    <section v-else-if="editLearnerDialog">
      <el-button size="mini" type="text" @click="backBtn"> <<< </el-button>
      <learner-list v-if="editLearnerDialog" :course="currCourse"></learner-list>
    </section>
  </section>
</template>
<script>
  import signInfo from './signInfo'
  import learnerList from '../learner/learnerList'
  import periodList from '../period/periodList'
  import dateFormater from '@/common/date-formater'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "courseList",
    components:{periodList,learnerList,signInfo},
    data() {
      return {
        classList:null,
        totalPage:0,
        editCourseDialog:false,
        currCourse:{},
        editPeriodDialog:false,
        editLearnerDialog:false,
        showSignDialog:false
      }
    },
    created(){
      console.log(this.department)
      this.getClassList()
    },
    computed: {
      ...mapGetters(['department']),
    },
    watch:{},
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      goPage(val){
        this.getClassList(val-1)
      },
      backBtn(b){
        this.editPeriodDialog=false
        this.editLearnerDialog=false
        this.getClassList()
      },
      timeFormatter(a,b,c,d){
        // console.log(a,b,c,d)
        return dateFormater.format(c)
      },
      getClassList(pageNo){
        this.fetch({name:"getClassList",data:{page:pageNo? pageNo:0,departmentId:this.department.id}})
          .then(res=>{
            console.log(res.content)
            this.classList = res.content
            this.totalPage = res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      createCourseBtn(){
        this.editCourseDialog=true
        this.currCourse={
          departmentId:this.department.id
        }
      },
      confirmCurrCourseBtn(course){
        console.log(course)
        course.start=dateFormater.formatDatetime(course.start)
        course.end=dateFormater.formatDatetime(course.end)
        if(course.id){
          //更新
          this.updateCourse(course)
        }else {
          this.createCourse(course)
        }
      },
      updateCourse(data){
        this.fetch({name:"updateCourse",data})
          .then(res=>{
            console.log(res)
            this.editCourseDialog=false
            this.getClassList()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      createCourse(data){
        this.fetch({name:"createCourse",data})
          .then(res=>{
            console.log(res)
            this.editCourseDialog=false
            this.getClassList()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      confirm(row){
        console.log(row)
        this.currCourse=row
        this.editCourseDialog=true
      },
      editPeriodBtn(row){
        console.log(row)
        this.currCourse=row
        this.editPeriodDialog=true
      },
      editLearnerBtn(row){
        this.currCourse=row
        this.editLearnerDialog=true
      },
      cancelBtn(row){//取消按钮
        if(row.edit === undefined){
          Vue.set(row,'edit',false)//后续添加属性，需要vue联动
        }else {
          row.edit =false
        }
      },
      del(scope){//删除按钮
        this.loading=true
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"delCourse",data:{id:scope.row.id}})
              .then(res=>{
                this.loading=false
                this.classList.splice(scope.$index,1)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
            this.loading = false
          })
      },
      signBtn(row){
        this.currCourse=row
        this.showSignDialog=true
      }
    }
  }
</script>

<style scoped>

</style>
